<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        button {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body style="height:2000px;">
    <!-- 
        鼠标事件的的属性
         鼠标的位置
         e.clientX   鼠标相对于浏览器窗口可视区域的x坐标
         e.clientY

         e.pageX       鼠标相对于浏览器窗口文档的x坐标   （有滚动时 和clientX 不一样）
         e.pageY

         e.screenX    鼠标相对于浏览器屏幕的x坐标
        e.screenY

     -->
    <!-- <button>单击</button>
     <script>
       var btn= document.querySelector('button');
       btn.onclick=function(e){
        e=e||window.event;
         console.log(e);

         console.log('e.clientX='+e.clientX,'e.clientY='+e.clientY);
         console.log('e.pageX='+e.pageX,'e.pageY='+e.pageY);
         console.log('e.screenX='+e.screenX,'e.screenY='+e.screenY);
       }
     </script> -->

    <!-- 鼠标跟随 -->
    <!--1. 对文档加事件 onmousemove
         2.创建一个图片，追加到body
         3.图片跟随鼠标在移动  （不断获得鼠标的位置）   把鼠标的位置赋值 图片的位置
         4.图片的位置  ： left top    定位（绝对定位）

    -->
    <script>
        var img = document.createElement('img');
        img.src = './images/1.gif';
        img.style.width = "100px";
        img.style.position = "absolute";
        img.style.top = '0';
        img.style.left = "0";

        document.onmousemove = function (e) {
            e = e || window.event;
            document.body.appendChild(img);

            //  图片跟着走
            var x = e.pageX;// 不带单位
            var y = e.pageY;
            console.log(x, y);
            //    图片在鼠标的位置   一定要带单位
            img.style.left = x - 50 + 'px';
            img.style.top = y - 50 + 'px';



        }
    </script>

</body>

</html>